<template>
    <div class="logo">{{ isOpen ? 'V' : 'Vue3'}}</div>
    <el-menu router
             class="el-menu-vertical-demo"
             active-text-color="#409eff"
             background-color="#304156"
             text-color="#fff"
             :default-active="activeMenu.path"
             :collapse="isOpen">
        <SubMenu v-for="item in menu"
                 :key="item.title"
                 :itemConfig="item" />
    </el-menu>
</template>

<script setup>
import { ElMenu } from 'element-plus';
import { menu } from '@/router/menu'
import SubMenu from './SubMenu.vue';
import { toRefs } from 'vue';
import  { useStore }  from '@/store';
const store= useStore()
const { activeMenu, isOpen } = toRefs(store)
</script>

<style lang="less" scoped>
.logo {
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    background: #304156;
}
.el-menu-vertical-demo {
    height: calc(100% - 80px);
    border-right: none;
}
</style>